<template>
  <div class="split-text" ref="textRef">
    <span
      v-for="(letter, index) in letters"
      :key="index"
      class="letter"
      :style="{ 
        display: 'inline-block',
        opacity: 0,
        transform: 'translateY(20px)'
      }"
    >
      {{ letter === ' ' ? '\u00A0' : letter }}
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import gsap from 'gsap'

const props = defineProps({
  text: {
    type: String,
    default: ''
  }
})

const textRef = ref(null)

const letters = computed(() => {
  return props.text.split('')
})

onMounted(() => {
  const elements = textRef.value.children
  
  gsap.to(elements, {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.05,
    ease: 'power3.out',
    onComplete: () => {
      console.log('Animation complete!')
    }
  })
})
</script>

<style scoped>
.split-text {
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
}

.letter {
  display: inline-block;
  will-change: transform;
}
</style> 